<template>
  <view>
    <view class="mask" v-if="show" @click="close"></view>
    <view class="popup-pay" v-if="show">
      <view class="popup-pay-title">选择支付方式</view>
      <view class="popup-pay-list">
        <view
          class="popup-pay-item"
          v-for="method in payMethods"
          :key="method.value"
          @click="selectPayMethod(method)"
        >
          <image :src="method.icon" class="popup-pay-icon"></image>
          <text class="popup-pay-name">{{ method.name }}</text>
          <view class="popup-pay-radio">
            <uni-icons
              v-if="selectedPayMethod === method.value"
              type="circle-filled"
              size="25"
              color="#d9f700"
            ></uni-icons>
            <uni-icons
              v-else
              type="circle"
              size="25"
              color="#e0e0e0"
            ></uni-icons>
          </view>
        </view>
      </view>
      <view class="popup-pay-btns">
        <view class="popup-pay-cancel" @click="close">取消</view>
        <view class="popup-pay-confirm" @click="confirm">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "PaySelectPopup",
  props: {
    show: Boolean,
    payMethods: {
      type: Array,
      default: () => [
        { name: "支付宝", value: "1", icon: "/static/pay/alipay.png" },
        { name: "微信支付", value: "2", icon: "/static/pay/wechat.png" },
        { name: "余额支付", value: "4", icon: "/static/pay/balance.png" },
      ],
    },
    defaultMethod: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectedPayMethod: this.defaultMethod,
    };
  },
  watch: {
    defaultMethod(val) {
      this.selectedPayMethod = val;
    },
    show(val) {
      if (val) this.selectedPayMethod = this.defaultMethod;
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
    selectPayMethod(method) {
      this.selectedPayMethod = method.value;
    },
    confirm() {
      const selected = this.payMethods.find(
        (m) => m.value === this.selectedPayMethod,
      );
      this.$emit("confirm", selected);
    },
  },
};
</script>

<style scoped lang="scss">
.popup-pay {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1002;
  padding: 40rpx 32rpx 32rpx 32rpx;
  box-sizing: border-box;

  .popup-pay-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303030;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .popup-pay-list {
    .popup-pay-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f1f1f1;
      cursor: pointer;

      &.active {
        background: #f6faff;
      }

      .popup-pay-icon {
        width: 56rpx;
        height: 56rpx;
        margin-right: 24rpx;
      }

      .popup-pay-name {
        flex: 1;
        font-size: 28rpx;
        color: #303030;
        text-align: left;
      }

      .popup-pay-radio {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .popup-pay-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 80rpx;

    .popup-pay-cancel,
    .popup-pay-confirm {
      width: 48%;
      text-align: center;
      font-size: 28rpx;
      padding: 20rpx 0;
      border-radius: 66rpx;
    }

    .popup-pay-cancel {
      background: #f6f6f6;
      color: #7f7f7f;
    }

    .popup-pay-confirm {
      background: #d9f700;
      color: #303030;
      font-weight: bold;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}
</style>
